<template>
  <div class="execution">
    <basic-container>
      <el-form
        ref="setupForm"
        :label-position="labelPosition"
        :model="setupForm"
        :rules="setupFormRules"
        label-width="180px"
      >
        <div v-if="showAdd">
          <el-form-item label="图片本地储存地址：" prop="localStorageUrl">
            <el-input v-model="setupForm.localStorageUrl" disabled></el-input>
          </el-form-item>
          <el-form-item label="图片上传地址：" prop="uploadPicUrl">
            <el-input v-model="setupForm.uploadPicUrl" disabled></el-input>
          </el-form-item>
        </div>

        <div v-else>
          <el-form-item label="图片本地储存地址：" prop="localStorageUrl">
            <el-input v-model="setupForm.localStorageUrl"></el-input>
          </el-form-item>
          <el-form-item label="图片上传地址：" prop="uploadPicUrl">
            <el-input v-model="setupForm.uploadPicUrl"></el-input>
          </el-form-item>
        </div>
        <el-form-item>
          <el-button v-if="reset" @click="cancel()">重置</el-button>
          <el-button v-if="showAdd" @click="editor()">编辑</el-button>
          <el-button v-else @click="save()">保存</el-button>
        </el-form-item>
      </el-form>
    </basic-container>
  </div>
</template>
<script>
import { getById, update } from "@/api/config/index";
export default {
  data() {
    return {
      labelPosition: "left",
      showAdd: true,
      reset: false,
      setupForm: {
        localStorageUrl: null,
        uploadPicUrl: null,
      },
      setupFormRules: {
        localStorageUrl: [
          {
            required: true,
            trigger: "blur",
            message: "请输入图片本地储存地址",
          },
        ],
        uploadPicUrl: [
          {
            required: true,
            trigger: "blur",
            message: "图片上传地址",
          },
        ],
      },
    };
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      getById().then((res) => {
        this.setupForm = res.data.data;
      });
    },
    cancel() {
      this.setupForm = {};
    },
    editor() {
      this.showAdd = false;
      this.reset = true;
    },
    save() {
      this.$refs.setupForm.validate((valid) => {
        if (valid) {
          this.$confirm("确认提交吗？", "提示", {}).then(() => {
            update(this.setupForm).then((res) => {
              if (res.data.code === 200) {
                this.$message({
                  message: res.data.msg,
                  type: "success",
                  duration: 1000,
                });
                this.getList();
                this.showAdd = true;
              } else {
                this.$message({
                  message: res.data.msg,
                  type: "warning",
                  duration: 1000,
                });
              }
            });
          });
        }
      });
    },
  },
};
</script>